---
title: Architecture en îlots
description: Découvrez comment l'architecture en îlots d'Astro contribue à la rapidité des sites.
i18nReady: true
---

import IslandsDiagram from '~/components/IslandsDiagram.astro';
import ReadMore from '~/components/ReadMore.astro';

Astro a contribué à la création et à la popularisation d'un nouveau modèle d'architecture frontend appelé **architecture en îlots** (ou « Islands Architecture » en anglais). L'architecture en îlots fonctionne en rendant la majorité de votre page au format HTML à la fois statique et rapide, avec de plus petits « îlots » de JavaScript ajoutés lorsque l'interactivité ou la personnalisation est nécessaire sur la page (un carrousel d'images, par exemple). Cela permet d'éviter les charges utiles d'un JavaScript monolithique qui ralentissent la réactivité de nombreux autres frameworks web modernes basés sur JavaScript.

## Un peu d'histoire

Le terme « îlot composant » (ou « component island » en anglais) a été inventé pour la première fois par l'architecte frontend d'Etsy [Katie Sylor-Miller](https://sylormiller.com/) en 2019. Cette idée a ensuite été développée et documentée dans [ce billet](https://jasonformat.com/islands-architecture/) par le créateur de Preact, Jason Miller, le 11 août 2020.

> L'idée générale d'une architecture « en îlots » est d'une simplicité trompeuse : effectuer le rendu des pages HTML sur le serveur, et injecter des emplacements substituables ou des slots autour de régions hautement dynamiques [...] qui peuvent ensuite être « hydratés » sur le client en petits widgets autonomes, en réutilisant leur HTML initial rendu par le serveur.  
> Jason Miller, créateur de Preact

La technique sur laquelle repose ce modèle architectural est également connue sous le nom d'**hydratation partielle** ou **sélective**.

En revanche, la plupart des frameworks web basés sur JavaScript hydratent et restituent un site web entier sous la forme d'une seule grande application JavaScript (également connue sous le nom d'application à page unique, ou SPA). Les SPA offrent simplicité et puissance, mais souffrent de problèmes de performance lors du chargement des pages en raison de l'utilisation intensive de JavaScript côté client.

Les SPA ont leur place, même [intégrées dans une page Astro](/fr/guides/migrate-to-astro/from-create-react-app/). Mais les SPA n'ont pas la capacité native d'hydrater de manière sélective et stratégique, ce qui en fait un choix lourd pour la plupart des projets sur le web aujourd'hui.

Astro est devenu populaire en tant que premier framework web JavaScript grand public avec hydratation sélective intégrée, utilisant le même modèle d'îlots composants inventé par Sylor-Miller. Nous avons depuis élargi et fait évoluer le travail original de Sylor-Miller, qui a contribué à inspirer une approche similaire des îlots composants pour le contenu rendu dynamiquement par le serveur.

## Qu'est-ce qu'un îlot ?

Dans Astro, un îlot est un composant d'interface utilisateur amélioré sur une page HTML par ailleurs statique.

Un [**îlot de client**](#îlots-de-client) est un composant d'interface utilisateur JavaScript interactif qui est hydraté séparément du reste de la page, tandis qu'un [**îlot de serveur**](#îlots-de-serveur) est un composant d'interface utilisateur dont le contenu dynamique est restitué par le serveur séparément du reste de la page.

Les deux îlots exécutent des processus coûteux ou plus lents de manière indépendante, pour chaque composant, afin d'optimiser le chargement des pages.

## Composants îlot

Les composants Astro sont les éléments constitutifs de votre modèle de page. Ils se présentent sous la forme d'un code HTML statique, sans exécution côté client.

Considérez un îlot de client comme un widget interactif flottant dans une mer de HTML statique, léger et rendu par le serveur. Des îlots de serveur peuvent être ajoutés pour des éléments personnalisés ou dynamiques rendus par le serveur, tels que la photo de profil d'un visiteur connecté.

<IslandsDiagram>
    <Fragment slot="headerApp">En-tête (îlot interactif)</Fragment>
    <Fragment slot="sidebarApp">Barre latérale (HTML statique)</Fragment>
    <Fragment slot="main">
        Contenu statique comme du texte, des images, etc.
    </Fragment>
    <Fragment slot="carouselApp">Carrousel d'images (îlot interactif)</Fragment>
    <Fragment slot="footer">Pied de page (HTML statique)</Fragment>
    <Fragment slot="source">Source : [Islands Architecture: Jason Miller](https://jasonformat.com/islands-architecture/)</Fragment>
</IslandsDiagram>

Un îlot fonctionne toujours de manière isolée par rapport aux autres îlots de la page, et plusieurs îlots peuvent exister sur une même page. Les îlots peuvent toujours partager des états et communiquer entre eux, même s'ils s'exécutent dans des contextes de composants différents.

Cette flexibilité permet à Astro de prendre en charge plusieurs frameworks d'interface utilisateur tels que [React](https://react.dev/), [Preact](https://preactjs.com/), [Svelte](https://svelte.dev/), [Vue](https://vuejs.org/) et [SolidJS](https://www.solidjs.com/). Comme ils sont indépendants, vous pouvez même mélanger plusieurs frameworks sur une même page.

:::tip
Bien que la plupart des développeurs s'en tiennent à un seul framework d'interface utilisateur, Astro prend en charge plusieurs frameworks dans le même projet. Cela vous permet de :

- Choisir le framework qui convient le mieux à chaque composant.
- Apprendre un nouveau framework sans avoir à démarrer un nouveau projet.
- Collaborer avec d'autres personnes, même si elles travaillent avec des frameworks différents.
- Convertir progressivement un site existant vers un autre framework sans temps d'arrêt.
:::

## Îlots de client

Par défaut, Astro restituera automatiquement chaque composant de l'interface utilisateur en HTML et CSS, **en supprimant automatiquement tout JavaScript côté client**. 


```astro title="src/pages/index.astro"
<MyReactComponent />
```

Cela peut sembler strict, mais c'est ce comportement qui permet aux sites Astro d'être rapides par défaut et qui protège les développeurs contre l'envoi accidentel de JavaScript inutiles ou non désirés qui pourraient ralentir leur site web.

Transformer n'importe quel composant statique de l'interface utilisateur en un îlot interactif ne nécessite qu'une directive `client:*`. Astro construit et regroupe alors automatiquement votre JavaScript côté client pour optimiser les performances.

```astro title="src/pages/index.astro" ins="client:load"
<!-- Ce composant est désormais interactif sur la page ! 
     Le reste de votre site web reste statique -->
<MyReactComponent client:load />
```

Avec les îlots, le JavaScript côté client n'est chargé que pour les composants interactifs explicites que vous marquez à l'aide des directives `client:*`.

Et comme l'interaction est configurée au niveau du composant, vous pouvez gérer différentes priorités de chargement pour chaque composant en fonction de son utilisation. Par exemple, `client:idle` indique à un composant de se charger lorsque le navigateur devient inactif, et `client:visible` indique à un composant de ne se charger qu'une fois qu'il entre dans la fenêtre de visualisation.

<h3>Avantages des îlots de client</h3>

L'avantage le plus évident de créer à l'aide des îlots Astro est la performance : la majorité de votre site Web est convertie en HTML statique rapide et JavaScript n'est chargé que pour les composants individuels qui en ont besoin. JavaScript est l'un des éléments les plus lents à charger par octet, chaque octet est donc important.

Un autre avantage est le chargement parallèle. Dans l'exemple ci-dessus, l'îlot « carrousel d'images », peu prioritaire, n'a pas besoin de bloquer l'îlot « en-tête », hautement prioritaire. Les deux se chargent en parallèle et fonctionnent de manière isolée, ce qui signifie que l'en-tête devient immédiatement interactif sans avoir à attendre le carrousel plus lourd situé plus bas dans la page.

Mieux encore, vous pouvez indiquer à Astro comment et quand effectuer le rendu de chaque composant. Si le carrousel d'images est très coûteux à charger, vous pouvez joindre une [directive client](/fr/reference/directives-reference/#directives-client) spéciale qui indique à Astro de ne charger le carrousel que lorsqu'il devient visible sur la page. Si l'utilisateur ne le voit pas, il ne se charge pas.

Dans Astro, c'est à vous, en tant que développeur, d'indiquer explicitement à Astro les composants de la page qui doivent également être exécutés dans le navigateur. Astro n'hydrate que ce qui est nécessaire sur la page et laisse le reste de votre site en HTML statique.

**Les îlots de client sont le secret de l'histoire de la performance rapide par défaut d'Astro !**

<ReadMore>En savoir plus sur [l'utilisation des composants de frameworks JavaScript](/fr/guides/framework-components/) dans votre projet.</ReadMore>

## Îlots de serveur

Les îlots de serveur sont un moyen de déplacer le code côté serveur coûteux ou lent hors du processus de rendu principal, ce qui permet de combiner facilement un HTML statique très performant et des composants dynamiques générés par le serveur.

Ajoutez la [directive `server:defer`](/fr/reference/directives-reference/#directives-serveur) à n'importe quel composant Astro de votre page pour le transformer en son propre îlot de serveur :

```astro title="src/pages/index.astro" "server:defer"
---
import Avatar from "../components/Avatar.astro";
---
<Avatar server:defer />
```

Cela permet de diviser votre page en plus petites zones de contenu rendu par le serveur qui se chargent chacune en parallèle.

Le contenu principal de votre page peut être rendu immédiatement avec un contenu de remplacement, tel qu'un avatar générique, jusqu'à ce que le contenu de votre îlot soit disponible. Avec les îlots de serveur, la présence de petits éléments de contenu personnalisé ne retarde pas le rendu d'une page par ailleurs statique.

Ce modèle de rendu a été conçu pour être portable. Il ne dépend d'aucune infrastructure de serveur et fonctionne donc avec n'importe quel hôte, qu'il s'agisse d'un serveur Node.js dans un conteneur Docker ou du fournisseur sans serveur de votre choix.

<h3>Avantages des îlots de serveur</h3>

L'un des avantages des îlots de serveur est la possibilité de rendre les parties les plus dynamiques de votre page à la volée. Cela permet à l'enveloppe extérieure et au contenu principal d'être mis en cache de manière plus agressive, ce qui permet d'obtenir des performances plus rapides.

Un autre avantage est d'offrir une excellente expérience aux visiteurs. Les îlots de serveur sont optimisés et se chargent rapidement, souvent avant même que le navigateur n'ait peint la page. Mais pendant le court laps de temps nécessaire au rendu de vos îlots, vous pouvez afficher un contenu de repli personnalisé et empêcher tout changement de mise en page.

Un exemple de site bénéficiant des îlots de serveur d'Astro est une vitrine de commerce électronique. Bien que le contenu principal des pages de produits change rarement, ces pages comportent généralement des éléments dynamiques :

- L'avatar de l'utilisateur dans l'en-tête.
- Les offres spéciales et les ventes pour le produit.
- Les commentaires des utilisateurs.

En utilisant des îlots de serveur pour ces éléments, votre visiteur verra immédiatement la partie la plus importante de la page, votre produit. Les avatars génériques, les états de chargement et les annonces du magasin peuvent être affichés en tant que contenu de secours jusqu'à ce que les éléments personnalisés soient disponibles.

<ReadMore>En savoir plus sur [l'utilisation des îlots de serveur](/fr/guides/server-islands/) dans votre projet.</ReadMore>
